Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(docs): make layout more consistent #2168

Merged
merged 3 commits into from
Mar 20, 2022
Merged

fix(docs): make layout more consistent #2168

merged 3 commits into from
Mar 20, 2022

Conversation

hasparus
Copy link
Member

@hasparus hasparus commented Mar 19, 2022 •
edited
Loading

I gave the docs layout some more attention. We have a search input, so the sticky header is convenient, and as a side effect, it solves the visual glitch of too short sidebar.

What's changed

  • The header is now sticky and it casts a shadow when window.scrollY is greater than 0.

image

📦 Published PR as canary version: 0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0

✨ Test out this PR locally via:

npm install @theme-ui/color-modes@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/color@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/components@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/core@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/css@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/custom-properties@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/editor@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-plugin-theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-theme-style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install gatsby-theme-ui-layout@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/match-media@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/mdx@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/parse-props@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-base@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-bootstrap@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-bulma@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-dark@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-deep@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-funk@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-future@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-polaris@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-roboto@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-sketchy@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-swiss@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-system@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/preset-tosh@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/presets@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/prism@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/sidenav@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/theme-provider@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
npm install @theme-ui/typography@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
# or 
yarn add @theme-ui/color-modes@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/color@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/components@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/core@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/css@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/custom-properties@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/editor@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-plugin-theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-theme-style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add gatsby-theme-ui-layout@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/match-media@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/mdx@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/parse-props@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-base@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-bootstrap@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-bulma@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-dark@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-deep@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-funk@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-future@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-polaris@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-roboto@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-sketchy@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-swiss@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-system@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/preset-tosh@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/presets@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/prism@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/sidenav@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/style-guide@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/tailwind@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/theme-provider@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add theme-ui@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0
yarn add @theme-ui/typography@0.14.0--canary.2168.e7bb3221501b77b3893868142a95988f0e72ad8b.0

Version

Published prerelease version: v0.14.0-develop.22

Changelog

🎉 This release contains work from new contributors! 🎉

Thanks for all your work!

❤️ Brage (@braaar)

❤️ peterlits zo (@PeterlitsZo)

❤️ Ryan Turner (@rtturner)

❤️ Cannon Lock (@CannonLock)

🚀 Enhancement

  • feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
  • @theme-ui/tailwind
    • feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
  • @theme-ui/custom-properties
    • feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
  • @theme-ui/color-modes
    • feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
  • theme-ui

🐛 Bug Fix

👨‍💻 Minor changes

  • Update jsx-pragma.mdx (@hasparus)
  • docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

Authors: 9

@hasparus hasparus requested a review from lachlanjc as a code owner March 19, 2022 00:00
@vercel
Copy link

vercel bot commented Mar 19, 2022 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/systemui/theme-ui/Q8Co8Yei1MwVEADDKnQVy3jmUyfY
✅ Preview: https://theme-ui-git-docs-header-scroll-shadow-systemui.vercel.app

@hasparus hasparus added the documentation Changes only affect the documentation label Mar 19, 2022
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 19, 2022 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84b424d:

Sandbox Source
next-theme-ui-example Configuration
gatsby-plugin-theme-ui-example Configuration

@hasparus hasparus force-pushed the docs-header-scroll-shadow branch from a508ea0 to 1933f4e Compare March 20, 2022 13:37
@hasparus hasparus force-pushed the docs-header-scroll-shadow branch from 1933f4e to 8d9cb0b Compare March 20, 2022 14:04
@hasparus hasparus force-pushed the docs-header-scroll-shadow branch from 8d9cb0b to ac00496 Compare March 20, 2022 14:22
Zolwiastyl
Zolwiastyl approved these changes Mar 20, 2022
View reviewed changes
Copy link
Contributor

@Zolwiastyl Zolwiastyl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, works.
Niptick: sticky topbar shadow for darker themes should have higher opacity

@hasparus hasparus merged commit baec10c into develop Mar 20, 2022
@hasparus hasparus deleted the docs-header-scroll-shadow branch March 20, 2022 17:30
@hasparus hasparus added the prerelease This change is available in a prerelease. label Mar 20, 2022
@lachlanjc
Copy link
Member

Lovely work!!

@hasparus hasparus mentioned this pull request Mar 21, 2022
Merged
@hasparus
Copy link
Member Author

🚀 PR was released in v0.14.0 🚀

@hasparus hasparus added released This issue/pull request has been released. and removed prerelease This change is available in a prerelease. labels Mar 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Zolwiastyl Zolwiastyl Zolwiastyl approved these changes

@lachlanjc lachlanjc Awaiting requested review from lachlanjc lachlanjc is a code owner

Assignees
No one assigned
Labels
documentation Changes only affect the documentation released This issue/pull request has been released.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@hasparus @lachlanjc @Zolwiastyl